<template>
  <div class="g-nav">
    <div class="warp">
      <ul class="nav">
        <li>
          <router-link to="/Home">
            <em>推荐</em>
          </router-link>
        </li>
        <li>
          <router-link to="/Home/toplist">
            <em>排行榜</em>
          </router-link>
        </li>
        <li>
          <router-link to="/Home/playList">
            <em>歌单</em>
          </router-link>
        </li>
        <li>
          <router-link to="/Home/Djradio">
            <em>主播电台</em>
          </router-link>
        </li>
        <li>
          <router-link to="/Home/artist">
            <em>歌手</em>
          </router-link>
        </li>
        <li>
          <router-link to="/Home/album">
            <em>新碟上架</em>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
  <div style="background-color:#f5f5f5;">
    <div class="bd">
      <div class="wrap-l">
        <div class="sbd-lbd">
          <div class="sbd-wrap">
            <div class="artist">
              <h1 class="artist-name">{{artitsInfo.artist.name}}</h1>
              <img class="artist-img" :src="`${artitsInfo.artist.cover}?param=640y300`" alt="">
            </div>
            <ul class="tab u-nav">
              <li>
                <router-link class="tab" :to="{path:'/songer/songermu', query:{id:this.$route.query.id}}">热门作品
                </router-link>
              </li>
              <li>
                <router-link class="tab" :to="{path:'/songer/Aablum', query:{id:this.$route.query.id}}">所有专辑
                </router-link>
              </li>
              <li>
                <router-link class="tab" :to="{path:'/songer/mv', query:{id:this.$route.query.id}}">相关MV</router-link>
              </li>
              <li>
                <router-link class="tab"
                  :to="{path:'/songer/info', query:{id:this.$route.query.id,name:this.artitsInfo.artist.name}}">艺人介绍
                </router-link>
              </li>
            </ul>
            <div>
              <keep-alive>
                <router-view></router-view>
              </keep-alive>
            </div>
          </div>
        </div>
      </div>
      <div class="wrap-r">
        <div class="srwrap">
          <h3>热门歌手</h3>
          <ul class="simiList">
            <li v-for="item in hotSonger" :key="item.id">
              <div>
                <a :href="`http://localhost:8080/#/songer/songermu?id=${item.id}`" @click="goto(item.id)">
                  <img :src="`${item.picUrl}?param=50y50`" alt="">
                </a>
              </div>
              <p class="overel">
                <a :title="item.name" :href="`http://localhost:8080/#/songer/songermu?id=${item.id}`"
                  @click="goto(item.id)">{{item.name}}</a>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'songer',
  data () {
    return {
      id: this.$route.query.id,
      artitsInfo: {},
      hotSonger: []
    }
  },
  methods: {
    async info () {
      const { data: art } = await this.$http.get('artist/detail', {
        params: {
          id: this.id
        }
      })
      if (art.code == 200) {
        this.artitsInfo = art.data
      }
      const { data: hotsonger } = await this.$http.get('top/artists', {
        params: {
          limit: 6
        }
      })
      if (hotsonger.code == 200) {
        this.hotSonger = hotsonger.artists
      }
    },
    goto (val) {
      this.id = val
      this.info()
    }
  },
  created () {
    this.info()
  },
}
</script>

<style lang='less' scoped>
.bd {
  width: 980px;
  margin: 0 auto;
  min-height: 700px;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  margin-bottom: 53px;
  &::after {
    content: "";
    clear: both;
    visibility: hidden;
    display: block;
    height: 0;
  }
}
.wrap-l {
  float: left;
  width: 100%;
  margin-right: -270px;
}
.sbd-lbd {
  margin-right: 271px;
}
.sbd-wrap {
  padding: 47px 30px 40px 39px;
}
.wrap-r {
  float: right;
  width: 270px;
}
.artist {
  position: relative;
  height: 333px;
}
.artist-name {
  display: inline-block;
  font-size: 24px;
  font-weight: normal;
}
.artist-img {
  display: block;
  width: 640px;
  height: 300px;
}
.u-nav {
  display: flex;
  height: 39px;
  border: 1px solid #ccc;
  background-position: 0 0;
  border-width: 0 1px;
  background-repeat: repeat-x;
  li {
    height: 39px;
    line-height: 39px;
    text-align: center;
    font-size: 14px;
    flex: 1;
    a {
      display: block;
      width: 100%;
      height: 100%;
      &:hover {
        background-position: left -45px;
      }
    }
    .router-link-exact-active {
      background-position: left -90px;
      &:hover {
        background-position: left -90px;
      }
    }
  }
}
.btns {
  margin-top: 15px;
}
.srwrap {
  padding: 20px 40px 40px 30px;
  h3 {
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    height: 23px;
    color: #333;
  }
  .simiList {
    display: flex;
    flex-wrap: wrap;
    margin-left: -25px;
    li {
      width: 50px;
      height: 92px;
      padding-left: 25px;
      img {
        width: 50px;
        height: 50px;
      }
      p {
        margin-top: 7px;
        text-align: center;
        a {
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>